<template>
  <view class="container">
    <view class="form">
      <view class="form-group">
        <text class="label">所在城市</text>
        <input class="input" v-model="formData.city" placeholder="请输入城市" />
      </view>
      
      <view class="form-group">
        <text class="label">小区/大厦/学校</text>
        <input class="input" v-model="formData.department" placeholder="请输入详细地址" />
      </view>
      
      <view class="form-group">
        <text class="label">楼号-门牌号</text>
        <input class="input" v-model="formData.houseNumber" placeholder="例如: 2号楼10号" />
      </view>
      
      <view class="form-group">
        <text class="label">收货人</text>
        <input class="input" v-model="formData.name" placeholder="请输入收货人姓名" />
      </view>
      
      <view class="form-group">
        <text class="label">联系电话</text>
        <input class="input" v-model="formData.phone" placeholder="请输入联系电话" />
      </view>
      
      <button class="submit-btn" @click="submitForm">保存</button>
    </view>
  </view>
</template>
<script>
import config from "@/config.js";

export default {
  data() {
    return {
      formData: {
        city: '',
        department: '',
        houseNumber: '',
        name: '',
        phone: ''
      },
      isPhoneValid: true
    }
  },
  onLoad(options) {
    if (options.id) {
      this.fetchAddressDetail(options.id);
    }
  },
  methods: {
    // 获取地址详情
    async fetchAddressDetail(id) {
      try {
        const response = await uni.request({
          url: `${config.api_host}/data/${id}`,
          method: 'GET'
        });

        if (response.statusCode === 200) {
          const data = response.data;
          this.formData = {
            city: data.city || '',
            department: data.department || '',
            houseNumber: data.houseNumber || '',
            name: data.name || '',
            phone: data.phone || ''
          };
        } else {
          throw new Error('获取地址详情失败');
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '获取地址详情失败',
          icon: 'none'
        });
      }
    },

    // 实时验证手机号
    validatePhone() {
      this.isPhoneValid = /^1[3-9]\d{9}$/.test(this.formData.phone);
    },

    // 提交表单
    async submitForm() {
      if (!this.validateForm()) return;

      try {
        const response = await uni.request({
          url: `${config.api_host}data`,
          method: 'POST',
          data: this.formData,
          header: {
            'Content-Type': 'application/json'
          }
        });

        if (response.statusCode === 200 || response.statusCode === 201) {
          uni.showToast({ title: '保存成功', icon: 'success' });
          setTimeout(() => {
            uni.redirectTo({ url: '/pages/add/address-list' });
          }, 1500);
        } else {
          throw new Error(response.data.message || '保存失败');
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '保存失败',
          icon: 'none'
        });
      }
    },

    // 表单验证
    validateForm() {
      if (!this.formData.city) {
        uni.showToast({ title: '请填写城市', icon: 'none' });
        return false;
      }

      if (!this.formData.department) {
        uni.showToast({ title: '请填写详细地址', icon: 'none' });
        return false;
      }

      if (!this.formData.houseNumber) {
        uni.showToast({ title: '请填写门牌号', icon: 'none' });
        return false;
      }

      if (!this.formData.name) {
        uni.showToast({ title: '请填写收货人姓名', icon: 'none' });
        return false;
      }

      if (!this.formData.phone) {
        uni.showToast({ title: '请填写手机号', icon: 'none' });
        return false;
      }

      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({ title: '请填写正确的手机号', icon: 'none' });
        return false;
      }

      return true;
    }
  }
}
</script>


<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.input {
  width: 100%;
  height: 44px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 15px;
}

.input:focus {
  border-color: #07c160;
  outline: none;
}

.submit-btn {
  background-color: #07c160;
  color: white;
  border: none;
  height: 48px;
  border-radius: 6px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
}
</style>